<script lang="ts" setup>
import { onMounted, provide, ref, useSlots, watch } from "vue";

interface TableProps {
  data?: any[];
  rowSelection?: {
    type: "checkbox" | "radio";
  };
  toolbar?: boolean;
  actionBar?: boolean;
  pagination?: boolean;
}

interface Column {
  title?: string;
  hidden?: boolean;
  slotName?: string;
  dataIndex?: string;
  width?: string | number;
  sorter?: boolean;
}

withDefaults(defineProps<TableProps>(), {
  data: [] as any,
  toolbar: false,
  pagination: true,
});
const emit = defineEmits(["action"]);
const columns = ref<Column[]>([]);
const modalVisible = ref(false);
const slots = useSlots();

provide("columns", columns);

function updateColumns() {
  if (slots.columns) {
    const slotColumns = slots.columns();
    const newColumns: Column[] = [];
    for (let i = 0; i < slotColumns.length; i++) {
      const element: any = slotColumns[i];
      newColumns.push({
        title: element.props.title,
        hidden: element.props.hidden || false,
        slotName: element.props["slot-name"] || element.props.slotName,
        dataIndex: element.props["data-index"] || element.props.dataIndex,
        width: element.props.width,
        sorter: element.props.sorter,
      });
    }
    columns.value = newColumns;
  }
}

watch(
  () => slots.columns,
  () => {
    updateColumns();
  }
);

onMounted(() => {
  updateColumns();
});
</script>

<template>
  <div class="umrp-table">
    <umrp-container :gap="16">
      <umrp-container direction="horizonal" jusitify="between">
        <slot name="toolbar"></slot>
      </umrp-container>
      <umrp-container width="100%" v-if="actionBar || toolbar" direction="horizonal" justify="between">
        <div>
          <template v-if="actionBar">
            <umrp-button type="primary" @click="emit('action', 'add')">新增</umrp-button>
          </template>
        </div>
        <template v-if="toolbar">
          <umrp-button type="primary" @click="modalVisible = true" style="float: right">列配置</umrp-button>
        </template>
      </umrp-container>
      <table class="umrp-table">
        <colgroup>
          <template v-for="(column, index) in columns" :key="index">
            <col v-if="!column.hidden" :style="{ width: column.width ? `${column.width}px` : '' }" />
          </template>
        </colgroup>
        <thead class="umrp-table-thead">
          <tr>
            <th v-if="rowSelection">
              <umrp-checkbox v-if="rowSelection.type === 'checkbox'"></umrp-checkbox>
            </th>
            <template v-for="(column, _) in columns">
              <th v-if="!column.hidden" :style="{ textAlign: 'left' }">
                <div class="column">
                  <span>{{ column.title }}</span>
                  <umrp-icon name="sort" v-if="column.sorter"></umrp-icon>
                </div>
              </th>
            </template>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, key) in data">
            <td style="text-align: center" v-if="rowSelection">
              <umrp-checkbox v-if="rowSelection.type === 'checkbox'"></umrp-checkbox>
              <umrp-theme>
                <umrp-radio v-if="rowSelection.type === 'radio'" name="tableRadio"></umrp-radio>
              </umrp-theme>
            </td>
            <template v-for="column in columns">
              <td v-if="!column.hidden">
                <div v-if="column.slotName">
                  <slot :name="column.slotName" v-bind="{ record: item, rowIndex: key }"></slot>
                </div>
                <template v-else>
                  <template v-if="column.dataIndex === 'id' && !item[column.dataIndex]">
                    <div>{{ key + 1 }}</div>
                  </template>
                  <template v-else>
                    {{ column.dataIndex && item[column.dataIndex] }}
                  </template>
                </template>
              </td>
            </template>
          </tr>
        </tbody>
      </table>
      <umrp-empty v-if="data.length === 0"></umrp-empty>
      <umrp-container direction="horizonal" justify="between" align="center" v-if="pagination">
        <umrp-text color="#333">共{{ data.length }}条数据</umrp-text>
        <umrp-pagination></umrp-pagination>
      </umrp-container>
    </umrp-container>
    <umrp-modal v-model:visible="modalVisible">
      <template v-for="column in columns">
        <umrp-checkbox v-model="column.hidden">{{ column.title }}</umrp-checkbox>
      </template>
    </umrp-modal>
  </div>
</template>

<style lang="scss" scoped>
.umrp-table {
  width: 100%;

  table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    // border: 1px solid var(--border-color-1);
    border-radius: 8px;
    // overflow: hidden;
  }

  .column {
    display: flex;
    gap: 6px;
    align-items: center;
  }

  &-thead {
    background-color: var(--bg-color);
  }

  ::v-deep(td),
  ::v-deep(th) {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
  }

  ::v-deep(th) {
    font-weight: normal;
    padding: 12px 10px;
  }

  ::v-deep(td) {
    font-size: 14px;
    color: var(--text-gray-1);
  }
}
</style>
